<template>
<div>
  <div v-if="as === 'Title'" class="tags">
    <span class="tag is-large is-primary" :value="value">{{ value }}</span>
  </div>
  <div v-else class="tags has-addons">
    <span class="tag is-info is-large" :keyname="keyname">{{ keyname }}</span>
    <span class="tag is-large" :value="value">{{ value }}</span>
  </div>
  <p class="is-hidden">{{ as }}</p>
</div>
</template>

<script>
export default {
  name: 'CardInfoField',
  props: ['keyname', 'value'],
  data: function () {
    return {
      as: ''
    }
  },
  created: function () {
    this.initAs()
  },
  methods: {
    initAs: function () {
      const vm = this
      if (this.as === '') {
        this.$db.settings.findOne(
          {
            section: 'fields',
            'in': 'search',
            role: { '$regex': /^as/ },
            name: this.keyname
          },
          { role: 1, _id: 0 })
          .exec(function (err, doc) {
            if (err) {
              console.log(err)
            }
            if (doc === null) {
              vm.as = 'Tag'
            } else {
              vm.as = doc.role.slice(2)
            }
          })
      }
    }
  }
}
</script>

<style>
</style>
